<template>
  <div>
    <Card>
      <Form ref="formInline" :model="formInline"  inline>
        <FormItem prop="user">
            <Input type="text" v-model="formInline.id" placeholder="主播ID" />
        </FormItem>
        <FormItem prop="password">
            <Select v-model="formInline.status" placeholder="审核状态">
                <Option value="beijing">待审核</Option>
                <Option value="shanghai">已通过</Option>
                <Option value="shanghai">已拒绝</Option>
            </Select>
        </FormItem>
        <FormItem prop="password">
            <DatePicker type="daterange" placeholder="发起审核时间" style="width: 200px"></DatePicker>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formInline')">查询</Button>
            <Button type="primary" @click="visible=true" :disabled="selection.length<1">审核</Button>
        </FormItem>
    </Form>
      <tables ref="tables" editable :pageNum="pageNum" :listTotal="listTotal"   v-model="tableData" :columns="columns" @on-selection-change="selectChange"/>
    </Card>
    <Modal
        title="提现审核"
        v-model="visible"
        :footer-hide="true"
        class-name="vertical-center-modal">
        <div>
          <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
          <FormItem label="备注" prop="remark">
            <Input v-model="formValidate.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入审核备注" />
        </FormItem>
        <FormItem>
            <Button type="primary" @click="checkHandle(true)">通过</Button>
            <Button @click="checkHandle(false)" style="margin-left: 8px">拒绝</Button>
            <Button @click="hideCheckModal" style="margin-left: 8px">取消</Button>
        </FormItem>
      </Form>
        </div>
    </Modal>
  </div>
</template>

<script>
import Tables from '_c/tables'
import { getTableData } from '@/api/data'
export default {
  name: 'tables_page',
  components: {
    Tables
  },
  data () {
    return {
      columns: [
        {
          type: 'selection',
          width: 30,
          align: 'center'
        },
        {title: 'ID', key: 'id'},
        {title: '昵称', key: 'nickname'},
        {title: '手机号', key: 'nickname'},
        {title: '审核状态', key: 'nickname'},
        {title: '提现积分', key: 'nickname'},
        {title: '提现金额', key: 'nickname'},
        {title: '收款人', key: 'nickname'},
        {title: '银行名称', key: 'nickname'},
        {title: '银行卡号', key: 'nickname'},
        {title: '支付渠道', key: 'nickname'},
        {title: '发起提现时间', key: 'nickname'},
        {title: '审核时间', key: 'nickname'},
        {title: '审核人', key: 'nickname'}
      ],
      tableData: [],
      pageNum: 1,
      listTotal: 5,
      formInline: {
        id: '',
        nickname: '',
        mobile: '',
        type: '',
        status: ''
      },

      selection: [],
      visible: false,
      formValidate: {
        remark: ''
      },
      ruleValidate: {
        remark: [{
          required: true, message: '备注不能为空', trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    handleDelete (params) {
      console.log(params)
    },
    createAnchor () {
      this.$router.push('/anchor/create')
    },
    selectChange (selection) {
      this.selection = selection
    },
    checkHandle (flag) {
      this.$refs.formValidate.validate((vaild) => {
        if (vaild) {
          this.hideCheckModal()
        } else {

        }
      })
    },
    hideCheckModal () {
      this.$refs.tables.getTableRef().selectAll(false)
      this.visible = false
      this.formValidate.resetFields()
    }
  },
  mounted () {
    getTableData().then(res => {
      this.tableData = [{
        id: 1, avatar: '测试', nickname: '测试'
      }]// res.data
    })
  }
}
</script>

<style lang="less">
vertical-center-modal{
        display: flex;
        align-items: center;
        justify-content: center;

        .ivu-modal{
            top: 0;
        }
    }
</style>
